<template>
  <div class="app-container">
    <!-- <div class="filter-container">
      <el-date-picker
        v-model="dateTime"
        style="positon:relative;top:1px"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['12:00:00']"
      />
      <el-select v-model="listQuery.orgId" style="width: 140px" placeholder="选择机构" class="filter-item" :clearable="true">
        <el-option
          v-for="(item,index) in OrgList"
          :key="index"
          :label="item.orgName"
          :value="item.id"
        />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
    </div> -->

    <div>
      <el-row type="flex" justify="space-between">
        <el-col :span="16">
          <el-table
            :data="list"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            >
            <!--<el-table-column label="序号" align="center" width="100" >-->
            <!--<template slot-scope="{$index}">-->
            <!--<span>{{ $index+1 }}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="调查问卷" align="left">
              <template slot-scope="{row}">
                <span>{{ row.paperTitle || row.content }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="机构">
              <template slot-scope="{row}">
                <span>{{ row.orgId }}</span>
              </template>
            </el-table-column> -->
            <!--<el-table-column label="创建人" align="center">-->
            <!--<template slot-scope="{row}">-->
            <!--<span>{{ row.createdBy }}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column label="创建时间" align="center">-->
            <!--<template slot-scope="{row}">-->
            <!--<span>{{ row.createdDate }}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column label="修改人" align="center">-->
            <!--<template slot-scope="{row}">-->
            <!--<span>{{ row.updateBy }}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column label="修改时间" align="center">-->
            <!--<template slot-scope="{row}">-->
            <!--<span>{{ row.updateDate }}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column label="状态" align="center">-->
            <!--<template slot-scope="{row}">-->
            <!--<span>{{ row.testPaperStatus||row.qustionStatus }}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="{row,$index}">
                <el-button v-show="row.content" type="info" size="mini" @click="handleDetail(row,$index)">
                  统计
                </el-button>
              </template>
            </el-table-column>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
          </el-table></el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <!--<div class="title-container">-->
            <!--<span>满意饼状图</span>-->
            <!--</div>-->
            <div class="chart-container">
              <Pie v-if="pieList.length" id="chart12" height="500px" width="100%" :set-option-list="pieList" />
            </div>
          </div>
          <!-- <el-input
            type="textarea"
            :rows="5"
            placeholder="留言记录"
          /> -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style >
  .filter-container .filter-item{
    margin-bottom:0
  }
</style>
<script>
import waves from '@/directive/waves' // waves directive
// import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Pie from '@/components/Charts/PieChart'
import { getallList, getQuestionFromPaper } from '@/api/sysmanage'
import { answerCountByQid } from '@/api/querystats'
export default {
  name: 'Mechanism',
  components: { Pagination, Pie },
  directives: { waves },
  data() {
    return {
      dateTime: '',
      department: '',
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      OrgList: [],
      downloadLoading: false,
      pieList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getallList().then(response => {
        const { code, data, message } = response
        if (code === '200') {
          this.$message({
            message: message,
            type: 'success'
          })
          this.list = data.map(ele => {
            ele['hasChildren'] = true
            return ele
          })
        } else {
          this.$message({
            message: message,
            type: 'warning'
          })
        }
        // this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    load(tree, treeNode, resolve) {
      console.log('TCL: load -> tree', tree)
      const { id } = tree
      getQuestionFromPaper({ id }).then(res => {
        const { code, message, data } = res
        const arr = data || []
        arr.forEach(ele => {
          ele['pid'] = id
        })
        console.log('TCL: load -> arr', arr)

        if (code === '200') {
          resolve(arr)
        } else {
          this.$message({
            message: message,
            type: 'success'
          })
        }
      })
    },
    handleDetail(row, index) {
      const query = {
        'questionId': row.id,
        'testPaperId': row.pid
      }
      this.pieList = []
      answerCountByQid(query).then(res => {
        console.log('TCL: handleDetail -> res', res)
        const { data, code, message } = res
        if (code === '200') {
          this.$message({
            message: message,
            type: 'success'
          })
          this.pieList = data
          // this.pieList =
          //  [
          //    { value: 335, name: '中国银行南山分行调查问卷' },
          //    { value: 310, name: 'test2' },
          //    { value: 234, name: 'zgz测试试卷' },
          //    { value: 135, name: '你喜欢吃什么' }
          //  ]
        } else {
          this.$message({
            message: message,
            type: 'warning'
          })
        }
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    }

  }
}
</script>
